<template>
  <view class="welcome-page">
    <image class="keai-image" src="https://miu-bloom.oss-cn-qingdao.aliyuncs.com/chart-icon//keai-02.png" mode="widthFix"/>
    <view class="welcome-page-item" style="margin-top: 34vh;">
      <view class="item-text">
        <view class="title">经期长度</view>
        <view class="context">月经开始到结束的时间</view>
      </view>
      <view class='item-picker' @click="periodLengthShow = true">
        <view class="right-text">
          {{ settingData.periodLength == null ? '点击设置' : settingData.periodLength + ' 天' }}
        </view>
        <uni-icons type="right" size="30" style="display: inline-block;margin: auto 0"/>
      </view>
    </view>
    <view class="welcome-page-item" style="margin-top: 20rpx;">
      <view class="item-text">
        <view class="title">周期天数</view>
        <view class="context">两次月经开始的时间间隔</view>
      </view>
      <view class='item-picker' @click="cycleDaysShow = true">
        <view class="right-text">
          {{ settingData.cycleDays == null ? '点击设置' : settingData.cycleDays + ' 天' }}
        </view>
        <uni-icons type="right" size="30" style="display: inline-block;margin: auto 0"/>
      </view>
    </view>
    <view class="welcome-page-item" style="margin-top: 20rpx;">
      <view class="item-text">
        <view class="title">最近月经</view>
        <view class="context">最近一次月经开始日期</view>
      </view>
      <view class='item-picker' @click="recentMenstruationShow = true">
        <view class="right-text">
          {{ settingData.recentMenstruation == null ? '点击设置' : settingData.recentMenstruation }}
        </view>
        <uni-icons type="right" size="30" style="display: inline-block;margin: auto 0"/>
      </view>
    </view>

    <view class="experience">
      <button class="experience-button" @click="startHandle()">开始体验</button>
    </view>

    <u-picker title="经期天数" :show="periodLengthShow" :columns="periodLengthList" @cancel="periodLengthCancel"
              @confirm="periodLengthConfirm"></u-picker>
    <u-picker title="周期天数" :show="cycleDaysShow" :columns="cycleDaysList" @cancel="cycleDaysCancel"
              @confirm="cycleDaysConfirm"></u-picker>
    <u-datetime-picker title="最近一次月经开始日期" :show="recentMenstruationShow" mode="date" :max-date="maxDate()"
                       :min-date="minDate()" @cancel="recentMenstruationCancel"
                       @confirm="recentMenstruationConfirm"></u-datetime-picker>
  </view>
</template>

<script>
import request from '@/api/request.js';
import {commonCycleDaysList, commonPeriodLengthList} from "@/api/commonArray";

export default {
  data() {
    return {
      settingData: {
        periodLength: null,
        cycleDays: null,
        recentMenstruation: null,
      },
      periodLengthShow: false,
      periodLengthList: commonPeriodLengthList,
      cycleDaysShow: false,
      cycleDaysList: commonCycleDaysList,
      recentMenstruationShow: false,
      startButtonDisabled: true
    };
  },
  methods: {
    // 经期长度取消
    periodLengthCancel() {
      this.periodLengthShow = false
      this.buttonDisabled()
    },
    // 经期长度确认
    periodLengthConfirm(selectItem) {
      this.settingData.periodLength = selectItem.value[0]
      this.periodLengthCancel()
      this.buttonDisabled()
    },
    // 周期天数取消
    cycleDaysCancel() {
      this.cycleDaysShow = false
      this.buttonDisabled()
    },
    // 周期天数确认
    cycleDaysConfirm(selectItem) {
      this.settingData.cycleDays = selectItem.value[0]
      this.cycleDaysCancel()
      this.buttonDisabled()
    },
    // 最近月经取消
    recentMenstruationCancel() {
      this.recentMenstruationShow = false
      this.buttonDisabled()
    },
    // 最近月经确认
    recentMenstruationConfirm(e) {
      const timeFormat = uni.$u.timeFormat
      this.settingData.recentMenstruation = timeFormat(e.value, 'yyyy-mm-dd')
      this.recentMenstruationCancel()
      this.buttonDisabled()
    },
    maxDate() {
      const currentDate = new Date();
      currentDate.setFullYear(currentDate.getFullYear() + 1);
      return currentDate.getTime();
    },
    minDate() {
      const currentDate = new Date();
      currentDate.setFullYear(currentDate.getFullYear() - 1);
      return currentDate.getTime();
    },
    // 按钮禁用检查
    buttonDisabled() {
      this.startButtonDisabled = this.settingData.periodLength == null &&
          this.settingData.cycleDays == null &&
          this.settingData.recentMenstruation == null;
    },
    // 开始体验
    startHandle() {
      if (this.startButtonDisabled) {
        uni.showToast({
          title: "请设置周期数据",
          icon: 'none'
        })
        return;
      }
      uni.showLoading({
        title: "加载中"
      })
      uni.login({
        provider: "weixin",
        success: (loginRes) => {
          request({
            url: `/wxUser/register`,
            method: 'POST',
            data: {
              code: loginRes.code,
              recentMenstruation: this.settingData.recentMenstruation,
              periodLength: this.settingData.periodLength,
              cycleDays: this.settingData.cycleDays
            },
            custom: {
              showError: false,
              showLoading: true,
            },
          }).then((res) => {
            // 如果对象为空，证明不存在，跳转到设置界面
            if (res.code == 200) {
              uni.setStorageSync("miuUserInfo", res.data)
              uni.reLaunch({
                url: "/pages/home/index"
              })
            }
          }).finally(() => {
            uni.hideLoading();
          })
        }
      })
    }
  },
  onLoad() {
    uni.login({
      provider: "weixin",
      success: (loginRes) => {
        request({
          url: `/wxUser/login`,
          method: 'POST',
          data: {
            code: loginRes.code
          },
          custom: {
            showError: false,
            showLoading: true,
          },
        }).then((res) => {
          // 如果对象为空，证明不存在，跳转到设置界面
          if (res.data != null) {
            uni.setStorageSync("miuUserInfo", res.data)
            uni.reLaunch({
              url: "/pages/home/index"
            })
          }
        })
      }
    })
  }
}
</script>

<style lang="scss">
@import "@/pages/welcome/index.less";
</style>
